<template>
  <div class="sidebarWrapper">
    <nav class="sidebar">
      <ul class="sidebarList">
        <li v-for="(item,index) of sidebarList" :key="index">
          <router-link :to="{
            path:item.sidebarPath,
            query:{
              sidebarId:item.blogSidebarId
            }
          }"
                       class="sidebarItem"
                       tag="div">{{item.sidebarName}}</router-link>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'sidebar',
  data () {
    return {
      sidebarList: []
    }
  },


  methods: {
    getSidebarList(){
      this.$http({
        url: this.$http.adornUrl('/blog/blogSidebar'),
        method: 'get',
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.sidebarList = data.list
        } else {
        }
        this.dataListLoading = false
      })
    },

  },
  created() {
    this.getSidebarList()
  }
}
</script>

<style lang="stylus" scoped>
.router-link-active
  background #f44444
  color #fff
.sidebarWrapper
  width 96px
  background-color #fff
  color #707070
  margin-right 14px
  text-align center
  line-height 32px
  font-size 14px
  position sticky
  top 0
  z-index 2
  box-sizing border-box
  padding 6px 0
  -webkit-box-shadow 0 1px 2px 0 rgba(0, 0, 0, 0.04)
  box-shadow 0 1px 2px 0 rgba(0, 0, 0, 0.04)
  .sidebarItem
    display block
    width 100%
    height 98%
    margin-bottom 1px
    cursor pointer
    &:hover
      background-color #f44444
      color #fff
</style>
